<template>
    <el-dialog top="5%" v-model="visible" :title="form.id ? '修改' : '添加'" @closed="onReset"
        :close-on-click-modal="false">
        <el-form :model="form" ref="formRef" label-width="100px">
            <el-form-item label="值班室名称">
                <el-input v-model="form.watch_role" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="form.name_list" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="排班" v-if="visible">
                <div>
                    <el-radio-group v-model="dayAndNight">
                        <el-radio :label="100">白班</el-radio>
                        <el-radio :label="200">夜班</el-radio>
                        <el-radio :label="0">取消排班</el-radio>
                    </el-radio-group>
                </div>
                <el-calendar v-model="value" id="calendar">
                    <template #date-cell="{ data }">
                        <div class="day-box" @click="hanldeSelected(data)">
                            <template v-for="(item, index) in selectedDates" :key="index">
                                <div class="day">
                                    <template v-if="(item.day == data.day) && item.type == 100">
                                        <img src="@\assets\images\baiban.png" alt=""> <span>白班</span>
                                    </template>
                                    <template v-if="(item.day == data.day) && item.type == 200">
                                        <img src="@\assets\images\yeban.png" alt=""> <span>夜班</span>
                                    </template>
                                </div>
                            </template>
                        </div>
                        <div class="solar"> {{ data.day.split('-').slice(1).join('-') }}</div>
                    </template>
                </el-calendar>
            </el-form-item>

            <el-form-item label="电话">
                <el-input v-model="form.phone_list" placeholder="请输入" maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="职务">
                <el-input v-model="form.duties" placeholder="请输入"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" @click="onConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog v-model="isVisible" title="选班" width="30%">
        <el-radio-group v-model="dayAndNight">
            <el-radio :label="100">白班</el-radio>
            <el-radio :label="200">夜班</el-radio>
            <el-radio :label="0">取消排班</el-radio>
        </el-radio-group>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="isVisible = false">取消</el-button>
                <el-button type="primary" @click="hanldeDayNight">确定</el-button>
            </span>
        </template>
    </el-dialog>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { zhibanAddOrUpdate, zhibanAddOrUpdate2 } from '@/api/dashboard'

const value = ref(new Date());
let selectedDates = ref([]);

let isVisible = ref(false);
let dayItem = reactive({
    day: '',
    type: 0
})
const hanldeSelected = (slotData) => {
    // isVisible.value = true;
    dayItem.day = slotData.day
    hanldeDayNight()
}

let dayAndNight = ref(-1);
const hanldeDayNight = () => {

    if (selectedDates.value.length == 0) {
        dayItem.type = dayAndNight.value;
        selectedDates.value.push(dayItem)
    } else {

        for (let i = 0; i < selectedDates.value.length; i++) {
            let item = selectedDates.value[i]

            if (item.day == dayItem.day) {
                if (dayAndNight.value == 0) {
                    selectedDates.value.splice(i, 1)
                } else {
                    item.type = dayAndNight.value;
                }
                break;
            } else {
                if ((i + 1 == selectedDates.value.length) && dayAndNight.value != 0) {
                    dayItem.type = dayAndNight.value;
                    selectedDates.value.push(dayItem)
                }
            }
        }
    }

    isVisible.value = false;
    dayItem = {
        day: '',
        type: 0
    }
    // dayAndNight.value = -1;
}

const emit = defineEmits(['refresh'])
const visible = ref(false)
const formRef = ref()
const form = reactive({
    id: 0,
    watch_role: '',
    watch_time: selectedDates,
    // type: 100,FLAG_UNRESTRICTED
    name_list: '',
    phone_list: '',
    duties: ''
})
const resetForm = JSON.parse(JSON.stringify(form))
const open = (data?) => {
    visible.value = true
    dayAndNight.value = -1;
    selectedDates.value = [];
    if (data) Object.assign(form, { ...data })
}
const onConfirm = async () => {
    await formRef.value.validate()
    const api = form.id ? zhibanAddOrUpdate(form) : zhibanAddOrUpdate2(form)
    api.then(({ msg }: any) => {
        ElMessage.success(msg)
        visible.value = false
        selectedDates.value = []
        emit('refresh')
    })
}
const onReset = () => {
    Object.keys(resetForm).forEach((item: string) => {
        form[item] = resetForm[item]
    })
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
::v-deep .el-calendar-table .el-calendar-day {
    position: relative;
}

::v-deep .el-calendar-table .el-calendar-day>div {
    height: 60px;
}

.el-calendar-table .el-calendar-day .day-box {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0px;
    right: 0px;
}

/**日期div的样式-选中*/
.el-calendar-table .el-calendar-day .day {
    width: 100%;
    height: 100% !important;
    position: absolute;
    bottom: 0px;
    right: 0px;
    text-align: right;
    padding-top: 50px;

    img {
        display: inline-block;
        width: 32px;
        height: 32px;
    }

    span {
        margin-top: 5px;
    }
}
</style>
